<template>
  <el-row class="container">
    <el-col :span="24" class="header" ref="header">
      <el-col
        :span="10"
        class="logo"
        :class="collapsed?'logo-collapse-width':'logo-width'"
      >{{collapsed?'':sysName}}</el-col>
      <el-col :span="7" :offset="2" class="rightMenu">
        <el-row :gutter="20" class="loginDate">
          <el-col :span="14">
            <div class="grid-content bg-purple">上次登陆时间：{{loginData.user.time}}</div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple-light">上次登录IP：{{loginData.user.ip}}</div>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="4" class="userinfo">
        <el-row :gutter="20">
          <el-col :span="12" class="welTag">
            <el-tag effect="light">欢迎使用管理员平台</el-tag>
          </el-col>
          <el-col :span="10" class="left-menu">
            <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner">
                <img :src="this.sysUserAvatar" />
                {{sysUserName}}
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item>我的消息</el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item> -->
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <el-col :span="3">
        <el-menu
          class="left-side"
          text-color="#555"
          active-text-color="#20a0ff"
          active-background-color="#f2f2f2"
          router
        >
          <el-menu-item class="menu-item" index="/admin/query">
            <i class="el-icon-menu"></i>
            <h4 class="inline" slot="title">数据查询</h4>
          </el-menu-item>
          <!-- <el-menu-item class="menu-item" index="/admin/detail">
            <i class="el-icon-setting"></i>
            <h4 class="inline" slot="title">数据管理</h4>
          </el-menu-item> -->
        </el-menu>
      </el-col>
      <el-col :span="21">
        <router-view class="router"></router-view>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      sysName: "管理员界面",
      sysUserName: "",
      sysUserAvatar:require("../assets/head.png"),
      collapsed: false,
      loginData: null
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    // if (JSON.stringify(this.userInfo) != "{}") {
    //     if (this.userInfo.avatar) {
    //         this.sysUserAvatar = this.userInfo.avatar;
    //     }
    //     this.sysUserName = this.userInfo.name;
    // }
    //console.log(this.$route.params.data);
    this.loginData = this.$store.state.loginData;
  },
  methods: {
    collapse: function() {
      this.collapsed = !this.collapsed;
    },
    //退出登录
    logout: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {
        //type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem("user");
          _this.$router.push("/login");
        })
        .catch(() => {});
    }
  },
  created() {
    this.loginData = this.$store.state.loginData;
  }
};
</script>
<style scoped lang="less">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;

  .header {
    height: 5.8vh;
    background-color: #20a0ff;
    min-height: 40px;
    padding-top: 10px;
    .logo {
      color: #fff;
      margin-left: 20px;
      margin-top: 7px;
    }
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        line-height: 6vh;
        img {
          width: 4vh;
          height: 4vh;
          border-radius: 50%;
          float: right;
        }
      }
    }
    .loginDate {
      color: black;
      //background-color: rgb(32, 192, 255);
      border-radius: 15px;
      margin-top: 7px;
    }
  }

  .tac {
    padding: 0;
    margin: 0 !important;
  }

  .el-menu {
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .router {
    height: 94vh;
    box-sizing: border-box;
    padding: 1px;
    overflow: auto;
  }
  .left-side {
    height: 94vh;
    min-width: 150px;
    margin-right: 20px;
  }
  /deep/ .el-table_1_column_2 {
    text-align: center !important;
  }
  /deep/ .el-menu-item div {
    color: #909399;
  }
  .inline {
    display: inline;
    font-size: 16px;
    font-weight: 700px;
    // color: #555;
  }
}
</style>